<template>
  <div class="jfglhy_box">
    <header-comm></header-comm>

    <div class="tjwz">
      <div class="tjwz_tab">
        <a-tabs :defaultActiveKey="wztabs" @change="callback">
          
          <a-tab-pane tab="积分管理" key="1" forceRender>
            <div>
              <div class="jfglhy">
                <div class="seach">
                  <div></div>
                  <div class="sele">
                    <a-input placeholder="请输入查询关键词 " style="width: 250px" @change="onSearch" />
                    <a-icon type="search" class="search" />
                  </div>
                </div>
                <!-- <xzl v-if="$store.state.xzlflg"></xzl> -->
                <a-table
                  @change="handleChangelist"
                  :loading="loading"
                  :columns="columns"
                  :pagination="pagination"
                  :dataSource="data"
                >
                  <template slot="integrals" slot-scope="text,record,index">
                    <span>
                      <span v-if="record.state == 1" style="color: green">+ {{record.integral}}</span>
                      <span v-else style="color: red">- {{record.integral}}</span>
                    </span>
                  </template>

                  <template
                    v-for="titletext in []"
                    :slot="titletext"
                    slot-scope="text, record, index"
                  >
                    <div :key="titletext"></div>
                  </template>
                </a-table>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane tab="积分规则" key="2">
            <div class="jfgz">
              <div class="gzsm">
                <div class="jfjl">
                  <ul>
                    <h3>积分奖励</h3>

                    <li>
                      <span class="sm">
                        <a-icon class="ico" type="right-circle" theme="filled" />
                        <span class="tit">注册会员积分：</span>
                        <a-input-number
                          size="large"
                          :min="0"
                          :max="9999999999"
                          :defaultValue="1"
                          @change="regChange"
                          v-model="memberReg"
                        />积分
                      </span>
                      <span v-show="memberRegJudge" style="color: red">* 不得为空！</span>
                    </li>
                    <li>
                      <span class="sm">
                        <a-icon class="ico" type="right-circle" theme="filled" />
                        <span class="tit">每日签到/登录积分：</span>
                        <a-input-number
                          size="large"
                          :min="0"
                          :max="9999999999"
                          :defaultValue="1"
                          @change="LoginChange"
                          v-model="login"
                        />积分
                      </span>
                      <span v-show="memberRegJudge" style="color: red">* 不得为空！</span>
                    </li>
                    <li>
                      <span class="sm">
                        <a-icon class="ico" type="right-circle" theme="filled" />
                        <span class="tit">邀请新客户并注册成功 获积分：</span>
                        <a-input-number
                          size="large"
                          :min="0"
                          :max="9999999999"
                          :defaultValue="1"
                          @change="sharerChange"
                          v-model="sharer"
                        />积分
                      </span>
                      <span v-show="loginJudge" style="color: red">* 不得为空！</span>
                    </li>
                    <li>
                      <span class="sm">
                        <a-icon class="ico" type="right-circle" theme="filled" />

                        <span class="tit">订单提交成功，交易额每：</span>
                        <a-input-number
                          size="large"
                          :min="0"
                          :max="9999999999"
                          :defaultValue="1"
                          @change="orderPriceChange"
                          v-model="orderPrice"
                        />元获取1个积分
                      </span>
                      <span v-show="orderPriceJudge" style="color: red">* 不得为空！</span>
                    </li>
                    <li>
                      <span class="sm">
                        <a-icon class="ico" type="right-circle" theme="filled" />
                        <span class="tit">询价积分：</span>
                        <a-input-number
                          size="large"
                          :min="0"
                          :max="9999999999"
                          :defaultValue="1"
                          @change="xunjiaChange"
                          v-model="xunjia"
                        />积分
                      </span>
                      <span v-show="xunjiaJudge" style="color: red">* 不得为空！</span>
                    </li>
                  </ul>

                  <ul>
                    <h3>积分消耗</h3>

                    <li>
                      <ul>
                        <li>
                          <span class="tit">
                            使用积分抵消消费金额 抵消¥1.00,需要
                            <a-input-number
                              size="large"
                              :min="0"
                              :max="9999999999"
                              :defaultValue="1"
                              @change="consumePriceChange"
                              v-model="consumePrice"
                            />积分
                          </span>&nbsp;&nbsp;&nbsp;
                          <span
                            v-show="consumePriceJudge"
                            style="color: red"
                          >* 不得为空！</span>
                          <br />
                          <span class="sm">
                            <a-icon class="ico" type="right-circle" theme="filled" />
                            <span class="tit2">最多可用积分抵消单笔订单金额的</span>
                            <a-input-number
                              size="large"
                              :min="0"
                              :max="9999999999"
                              :defaultValue="100"
                              @change="offsetPriceChange"
                              v-model="offsetPrice"
                            />%
                          </span>&nbsp;&nbsp;&nbsp;&nbsp;
                          <span
                            v-show="offsetPriceJudge"
                            style="color: red"
                          >* 不得为空！</span>
                          <br />
                          <!-- <span class="sm">
                            <a-icon class="ico" type="right-circle" theme="filled" />
                            <span class="tit2">单笔订单最多可使用</span>
                            <a-input-number
                              size="large"
                              :min="0"
                              :max="100000"
                              :defaultValue="0"
                              @change="SingleOrderChange"
                              v-model="SingleOrder"
                            />积分
                          </span>&nbsp;
                          <span v-show="SingleOrderJudge" style="color: red">* 不得为空！</span> -->
                        </li>
                      </ul>
                    </li>
                    <li class="sub_jfbtn">
                      <a-button type="primary" v-on:click="handleSaveIntegral">保存</a-button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";

const columns = [
  {
    title: "会员账号",
    dataIndex: "userid"
  },
  {
    title: "会员手机",
    dataIndex: "phone"
  },
  {
    title: "会员名称",
    dataIndex: "username"
  },

  {
    title: "公司名称",
    dataIndex: "gsmc"
  },

  {
    title: "+/-",
    dataIndex: "integrals",
    scopedSlots: { customRender: "integrals" }
  },
  {
    title: "时间",
    dataIndex: "datetime"
  },
  {
    title: "奖励说明",
    dataIndex: "remark"
  }
];
const data = [];
export default {
  inject: ["reload"],

  data() {
    return {
      wztabs: "1",
      //积分规则
      id_num: "",
      //注册会员积分
      memberReg: "",
      memberRegJudge: false,
      //登陆积分
      login: "",
      loginJudge: false,
      //订单总价获得积分
      orderPrice: "",
      orderPriceJudge: false,
      //询价积分
      xunjia: "",
      xunjiaJudge: false,
      //使用积分抵消金额
      consumePrice: "",
      consumePriceJudge: false,
      //最多可用积分抵消单笔订单金额
      offsetPrice: "",
      offsetPriceJudge: false,
      //单笔订单最多可使用积分
      SingleOrder: "",
      SingleOrderJudge: false,

      sharer: "",
      //积分管理---开始
      data,
      columns,
      serchvalue: "",
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      loading: true,
      selectedRowKeys: []
      //积分管理---结束
    };
  },
  components: {
    headerComm
  },
  methods: {
    callback(key) {
      this.wztabs = key;
      console.log(key);
    },
    //积分规则
    regChange(e) {
      //获取注册会员积分
      this.memberReg = e;
    },
    LoginChange(e) {
      //获取登录积分
      this.login = e;
    },
    orderPriceChange(e) {
      //获取订单总价获得积分
      this.orderPrice = e;
    },
    xunjiaChange(e) {
      //获取询价积分
      this.xunjia = e;
    },
    consumePriceChange(e) {
      //获取使用积分抵消消费金额
      this.consumePrice = e;
    },
    offsetPriceChange(e) {
      //获取最多可用积分抵消单笔订单金额
      this.offsetPrice = e;
    },
    SingleOrderChange(e) {
      //获取单笔订单最多可使用积分
      this.SingleOrder = e;
    },
    sharerChange(e) {
      //获取单笔订单最多可使用积分
      this.sharer = e;
    },
    //积分规则保存
    handleSaveIntegral(e) {
      this.axios
        .post(
          "huiyuan/integralAdd.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            id_num: this.id_num,
            memberReg: this.memberReg,
            login: this.login,
            orderPrice: this.orderPrice,
            xunjia: this.xunjia,
            consumePrice: this.consumePrice,
            offsetPrice: this.offsetPrice,
            SingleOrder: this.SingleOrder,
            sharer: this.sharer
          })
        )
        .then(res => {
          //console.log(res);
          if (res.data.code == 303) {
            this.handleIntegralRule();
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    //初始化积分规则列表
    handleIntegralRule() {
      var that = this;
      this.axios
        .post(
          "huiyuan/integralList.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          //console.log(res);
          if (res.data.code == 303) {
            that.id_num = res.data.result.id_num;
            that.memberReg = res.data.result.memberReg;
            that.login = res.data.result.login;
            that.orderPrice = res.data.result.orderPrice;
            that.xunjia = res.data.result.xunjia;
            that.consumePrice = res.data.result.consumePrice;
            that.offsetPrice = res.data.result.offsetPrice;
            that.SingleOrder = res.data.result.SingleOrder;
            that.sharer = res.data.result.sharer;
          }
        });
    },

    //搜索框
    onSearch(e) {
      this.serchvalue = value;
      var value = e.target.value;
      console.log(e.target.value);
      this.handleChangelist(this.pagination, value);
    },

    //积分管理
    handleChangelist(pagination, field = "") {
      this.axios
        .post(
          "huiyuan/integralAdminList.php",
          qs.stringify({
            page: pagination.current,
            pageSize: pagination.defaultPageSize,
            sqdwid: this.$store.state.bbl_sqdwid,
            field: field
          })
        )
        .then(res => {
          //console.log(res);
          if (res.data.code == 303) {
            this.data = res.data.result.data;
            this.pagination.total = Number(res.data.result.total);
            this.loading = false;
            this.cacheData = this.data.map(item => ({
              ...item
            }));
            for (var i = 0; i < res.data.result.data.length; i++) {
              this.data[i].key = res.data.result.data[i].id_num;
            }
          } else {
            this.data = [];
          }
        });
    }
  },
  created() {
    //积分规则
    this.handleIntegralRule();
    //积分管理
    this.handleChangelist(this.pagination);
  }
};
</script>

<style lang='less' scoped>
.jfglhy_box {
  position: relative;
  left: 10%;
  width: 90%;
  height: 930px;
  background-color: #f3f7f9;

  .jfglhy {
    position: relative;

    .seach {
      display: flex;
      justify-content: space-between;
      margin: 0px 0 20px;

      .sele {
        position: relative;

        i {
          position: absolute;
          top: 10px;
          right: 8px;
        }
      }
    }
  }

  .jfgz {
    width: 100%;

    .head_jfgz {
      width: 50%;
      height: 100px;

      .vip {
        padding: 10px;
        width: 300px;
        box-shadow: 0 0 5px #ccc;
        margin-left: 5px;
        display: flex;

        .vip_right {
          margin-left: 15px;

          p {
            margin-bottom: 5px !important;
          }

          .v_t {
            color: #000;
            font-weight: bold;

            .ico {
              font-size: 18px;
              color: #fd4666;
              margin-left: 10px;
            }
          }

          .ccc {
            color: #999;
            font-size: 12px;
          }

          .zt {
            font-size: 14px;
            color: #000;
          }
        }
      }

      .hyxz {
        margin: 10px 0;
        color: #000;
      }
    }

    .gzsm {
      margin-top: 30px;

      .jfjl {
        padding: 20px 0;

        h3 {
          display: inline-block;
          width: 40%;
          font-size: 16px;
          color: #000;
          font-weight: bold;
        }

        ul {
          li {
            color: #000;
            margin-left: 20px;

            .bt {
              display: inline-block;
              font-size: 14px;
              margin: 10px 0 0;
            }

            .sm {
              display: inline-block;
              font-size: 12px;
              color: #666;
              margin: 10px 15px;
              list-style: disc;
              line-height: 25px;

              .ico {
                margin: 0 10px;
              }

              .tit {
                display: inline-block;
                width: 200px;
                text-align: right;
              }
            }

            .tit2 {
              display: inline-block;
              width: 180px;
              text-align: right;
              margin-right: 13px;
            }
          }

          .sub_jfbtn {
            button {
              margin-left: 100px;
              width: 150px;
            }
          }
        }
      }
    }
  }
}

.ant-calendar-picker-container {
  z-index: 99999 !important;
}

.tjwz {
  width: 98%;
  margin: 0 auto;
  position: relative;
  top: 66px;
  text-align: left;
  background-color: #fff;

  .ant-tabs-nav-container {
    line-height: 0 !important;
  }

  .tjwz_tab {
    position: relative;
    width: 100%;
    padding: 0px 20px;

    .ant-tabs-tab-active {
      color: #1890ff;
    }

    .ant-tabs-tab:hover {
      color: #1890ff;
    }

    .ant-tabs-ink-bar {
      background-color: #1890ff;
      height: 3px;
    }

    .ant-tabs-tab {
      text-align: center;
      font-size: 16px;
      margin-right: 40px !important;
      padding: 25px !important;
    }
  }
}
</style>
